<template>
    <div>
        <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <el-row>
            <!--工具条-->
            <el-form :inline="true" :model="searchfrom" class="toolbar" label-position="right" label-width="70px">
                <el-row>
                    <el-form-item >
                        <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button @click="searchUserList" type="success" style="width: 170px">查询</el-button>
                    </el-form-item>
                </el-row>
                </el-form>
        </el-row>
        <el-table :data="dataList" highlight-current-row v-loading="gridLoading" class="grid" style="width: 100%；">
            <el-table-column label="id" prop="id" width="80">
                </el-table-column>
                <el-table-column label="姓名" prop="nickName" >
                </el-table-column>
                 <el-table-column label="数量" prop="money" >
                </el-table-column>
                 <!-- <el-table-column label="种类" prop="coinName" >
                </el-table-column> -->
                 <el-table-column label="账号状态" prop="status" >
                     <template slot-scope="scope">
                        <el-tag :type="scope.row.status == 1 ? 'success':'danger'">{{scope.row.status == 1 ? '正常' : '不正常'}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column label="手机号" prop="mobile" >
                </el-table-column>
                 <el-table-column label="时间" prop="updateTime" >
                </el-table-column>
                <el-table-column label="数据" prop="updateTime" >
                    <!-- <el-tag type="success"></el-tag> -->
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.normal == true ? 'success':'danger'">{{scope.row.normal == true ? '正常' : '不正常'}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column label="操作" >
                  <template slot-scope="scope">
                    <el-button size="small" @click="check(scope.row)">查看</el-button>
                  </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pageNo" :page-sizes="[10, 15, 20, 30]" :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </el-card>
     <el-dialog title="异常数据" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <!-- <el-table-column property="userId" label="时间" width="150"></el-table-column> -->
        <el-table-column property="createTime" label="时间" width="150"></el-table-column>
        <el-table-column property="billDescription" label="类别" ></el-table-column>
        <el-table-column property="money" label="数量（CY）"></el-table-column>
        <el-table-column property="balance" label="余额"></el-table-column>
      </el-table>
    </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
       dialogTableVisible: false,
        value1:'',
        gridData:[],
      dataList: [],
      gridLoading: false,
      total: 0,
      searchForm: {
        queryString: "",

        pageNo: 1,
        pageSize: 10
      }
    };
  },
  mounted() {
    this.refreshData();
  },
  methods: {
     check(row) {
      console.log(row);
      this.dialogTableVisible = true
      let parmes = {
        queryString: row.updateTime,
        userId: row.userId,
        queryId:1
      };
      this.$http.post("/manage/userCoin/billErr", parmes).then(res => {
        // console.log(res);
        if(res.data.status == 1) {
          this.gridData = res.data.data
        }
      });
    },
      searchUserList() {
          this.searchForm.queryString =
        this.formatTime(this.value1)
        this.refreshData()
      },
    formatUnixDateTime(time) {
      if (time == null) {
        return "";
      }
      let timeStamp = new Date(time);
      let month=timeStamp.getMonth() + 1;
      
      month=month>=10?month:"0"+month;
      let dateTime=timeStamp.getDate() + 1;
      dateTime=dateTime>=10?dateTime:"0"+dateTime;
      let time_p =
        timeStamp.getFullYear() +
        "-" +
        month +
        "-" +
        dateTime;
      // this.refreshData(time_p);
      console.log(time_p);
      return time_p;
    },
      formatTime(dateTime, format = "yyyy-MM-dd") {
      if (!dateTime) return dateTime;
      let args = {
        "M+": dateTime.getMonth() + 1,
        "d+": dateTime.getDate(),
        "h+": dateTime.getHours(),
        "m+": dateTime.getMinutes(),
        "s+": dateTime.getSeconds(),
        "q+": Math.floor((dateTime.getMonth() + 3) / 3), //quarter
        S: dateTime.getMilliseconds()
      };
      if (/(y+)/.test(format))
        format = format.replace(
          RegExp.$1,
          (dateTime.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var i in args) {
        let n = args[i];
        if (new RegExp("(" + i + ")").test(format))
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length)
          );
      }
      console.log(format);
      return format;
      // this.refreshData(format);
    },
    refreshData() {
      if (this.searchForm.queryString == "") {
        var timestamp = new Date().getTime();
        // console.log(timestamp);//打印当前时间戳
        // console.log(timestamp-24*60*60*1000);//当前时间戳（毫秒） - 1天毫秒数 = 前一天时间戳
        // this.formatTime(new Date());
        this.searchForm.queryString = this.formatUnixDateTime(
          timestamp - 24 * 60 * 60 * 1000
        );
      }
      console.log(this.searchForm);
      this.$http
        .post("/manage/userCoin/errCoinListByDate", this.searchForm)
        .then(res => {
            console.log(res.data)
          this.dataList = res.data.data.list;
          this.total = res.data.data.total;
        });
    },
    // 监听 pageSize 的变化，并立即获取最新的数据
    handleSizeChange(newSize) {
      this.searchForm.pageNo = newSize;
      this.refreshData();
    },
    // 监听 pageNum 的变化，并立即获取最新的数据
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.searchForm.pageNo = newPage;
      this.refreshData();
    }
  }
};
</script>

<style lang="less" scoped>
</style>
